<template>
  <div class="process-chart">
    <div class="process-chart__from" v-if="parent">
      <span>本流程由“</span>
      <p-button type="link" @click="toParent">{{ parent.title }}</p-button>
      <span>”流程触发</span>
    </div>
    <p-tabs v-model="activeName" style="margin-top: 20px;">
      <p-tab-pane key="record" tab="流程记录">
        <record ref="record" />
      </p-tab-pane>
      <p-tab-pane key="chart" tab="流程图" force-render>
        <ifram-com />
      </p-tab-pane>
    </p-tabs>
  </div>
</template>

<script>
import Record from './record.vue'
import IframCom from './iframCom.vue'
import process from '@/api/process'

export default {
  inject: ['processInstanceId'],
  components: { Record, IframCom },
  data () {
    return {
      activeName: 'record',
      parent: null
    }
  },
  mounted () {
    this.getDetail()
  },
  methods: {
    toParent () {
      window.open(this.parent.url)
    },
    getDetail () {
      process.getProcessDetail(this.processInstanceId).then(res => {
        if (res.code === 0 && res.data.parentId) {
          this.parent = {
            id: res.data.parentId,
            title: res.data.parentName,
            url: res.data.parentUrl
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.process-chart {
  position: relative;
  &__from {
    position: absolute;
    top: 0;
    right: 0;
    line-height: 45px;
    font-size: 16px;
    z-index: 1;
    .ant-btn-link {
      padding: 0;
    }
  }
}
</style>
